header {
    width: 100%;
    height: 60px;
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, 0.2);
    z-index: 990;
    nav {
        width: 1000px;
        margin: 0 auto;
        .logo {
            width: 110px;
            height: 22px;
            display: block;
            margin: 13px 0 0 25px;
            float: left;
        }
        ul {
            margin-left: 80px;
            float: left;
            li {
                float: left;
                margin: 0 20px;
                line-height: 60px;
                a {
                    color: #aed1fa;
                    font-size: 14px;
                }
                a:hover {
                    color: #e2effc;
                }
            }
        }
    }
}

.area1 {
    width: 100%;
    height: 739px;
    background: url(../img/area1背景.jpg);
    top: 0;
    z-index: 1;
    padding-top: 158px;
    .txt1 {
        width: 667px;
        height: 127px;
        background: url(../img/text1.png);
        margin: 0 auto;
    }
    .download-btn {
        width: 270px;
        height: 68px;
        margin: 60px auto 0 auto;
        display: block;
        background: url(../img/下载按钮背景.png);
    }
    .download-btn:hover {
        background: url(../img/下载按钮背景激活.png);
    }
    .info {
        color: #ffffff;
        font-size: 13px;
        text-align: center;
        line-height: 19.5px;
        padding-top: 8px;
    }
}

@mixin area {
    width: 100%;
    height: 800px;
    .box {
        width: 1018px;
        height: 800px;
        margin: 0 auto;
        position: relative;
    }
}
@mixin line {
    width: 380px;
    border-bottom: 1px solid #8dc3ff;
    div {
        width: 31px;
        height: 2px;
        background: #8dc3ff;
    }
}

.area2 {
    @include area;
    background-image: url(../img/area2背景.jpg);
    background-color: #eff8ff;
    background-repeat: no-repeat;
    background-position: 50% 0;
    .box {
        .img {
            width: 618px;
            height: 442px;
            background: url(../img/area2配图.png);
            position: absolute;
            top: 50%;
            margin-top: -25%;
        }
        .text {
            width: 380px;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(0, -50%);
            h2 {
                width: 331px;
                height: 39px;
                background: url(../img/area2标题.png);
                margin-bottom: 25px;
            }
            .line {
                @include line;
            }
            ul {
                width: 380px;
                padding-top: 55px;
                li {
                    height: 30px;
                    margin: 0 0 35px 2px;
                    font-size: 20px;
                    .icon {
                        width: 25px;
                        height: 25px;
                        background: url(../img/icon.png);
                        display: block;
                        float: left;
                        margin: 2.5px 12px 0 0;
                    }
                    .icon-1 {
                        background-position: 0 1px;
                    }
                    .icon-2 {
                        background-position: 0 -43px;
                    }
                    .icon-3 {
                        background-position: 0 -87px;
                    }
                    span {
                        display: block;
                        float: left;
                        line-height: 30px;
                        color: #333333;
                    }
                }
            }
        }
    }
}

.area3 {
    @include area;
    .text {
        width: 410px;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        h2 {
            width: 283px;
            height: 98px;
            background: url(../img/area3标题.png);
            margin-bottom: 25px;
        }
        .line {
            @include line;
            width: 283px;
        }
        p {
            padding-top: 60px;
            font-size: 20px;
        }
    }
    .img {
        width: 633px;
        height: 412px;
        background: url(../img/area3配图.png);
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -25%;
    }
}

.area4 {
    @include area;
    height: 832px;
    background: url(../img/area4背景.jpg);
    .box {
        height: 100%;
        .img {
            width: 496px;
            height: 496px;
            background: url(../img/area4配图.png);
            position: absolute;
            top: 98px;
        }
        .text {
            width: 370px;
            position: absolute;
            right: 0;
            top: 213px;
            h2 {
                width: 242px;
                height: 98px;
                background: url(../img/area4标题.png);
                margin-bottom: 25px;
            }
            .line {
                @include line;
                border-bottom-color: #c8e1fc;
                div {
                    background: #c8e1fc;
                }
            }
            p {
                color: #ffffff;
                padding-top: 60px;
            }
        }
        .download-btn {
            width: 270px;
            height: 68px;
            display: block;
            background: url(../img/下载按钮背景.png);
            position: absolute;
            top: 680px;
            left: 50%;
            transform: translate(-50%, 0);
        }
    }
}

footer{
    width: 100%;
    height: 156px;
    background: #388FF4;
    text-align: center;
    p{
        padding-top: 50px;
        text-align: center;
        color: #CFEDFF;
        font-size: 12px;
        line-height: 18px;
    }
    .box{
        text-align: center;
        padding-top: 6px;
    }
    a{
        background: url(../img/国徽icon.png);
        background-repeat: no-repeat;
        padding-left: 25px;
        color: #CFEDFF;
        font-size: 12px;
    }
}
